<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/jquery_mobile/jquery.mobile-1.4.2.css"/>
    <script src="../js/jquery/jquery.js"></script>
    <script src="../js/jquery_mobile/jquery.mobile-1.4.2.js"></script>
    <script src="../js/jquery/jquery.validate.js"></script>
    <script src="../js/jquery/jquery.form.js"></script>
    <script src="../js/jquery/jquery.cookie.js"></script>
    <script>
        $("#commentForm").validate();
        $(function(){
            var opt = {
                url:"../json/login.json",
                success:showresponse,
                dataType:'json'
            }

            function showresponse(data,rxml ){
                var strJson = JSON.stringify(data);
                var objJson = jQuery.parseJSON(strJson);
                switch (objJson.status_code){
                    case 0:
                        alert(objJson.log_name + "欢迎您");
                        /**
                         * 注意考虑cookie路径的问题
                         * */
                         $.cookie("log-user",objJson.log_name);
                        break;
                    case 1:
                        break;
                    case 2:
                        break;
                }
            }
            /**
             * 这边点击按钮进行提交
             * 我使用了ajax form，是一个插件
             * 官方文档：http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html
             */
            $("#commentForm").ajaxForm(opt);
        });
    </script>

    <style type="text/css">
        p {
            font-size: 1.5em;
            font-weight: bold;
        }

        .ui-block-a {
            width: 50%;
        }

        .ui-block-b {
            width: 50%;
        }
    </style>
</head>

<body>

<header data-role="header" data-theme="b">
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">Back</a>
    <h1>用户登录</h1>
</header>
<div data-role="content" class="content">
    <p><font color="#2EB1E8">个人登录</font></p>

    <form class="cmxform" id="commentForm" method="post" action="#">
        <fieldset>
            <label for="cname"><em>* </em>请输入账号</label>
            <input id="cname" name="name" minlength="6" placeholder="手机号码" type="text" required/>

            <label for="password"><em>* </em>请输入密码</label>
            <input id="password" name="password" minlength="6" placeholder="字母，数字" type="password" required/>

            <fieldset data-role="controlgroup">
                <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom"/>
                <label for="checkbox-1">保持登录状态</label>
            </fieldset>

            <div class="ui-block-a"><input class="submit" type="submit" value="登录" data-theme="a"></div>
            <div class="ui-block-b"><input type="reset" value="重置" data-theme="b"></div>
        </fieldset>
    </form>
    <h5>没有账号，<a href="user_register.html">点击这里注册</a></h5>
</div>
<footer data-role="footer"><h1>©2014 智慧旅游</h1></footer>

</body>
</html>